<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Title</title>
    <style>
        .cube {
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
}
        
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

.main-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    padding: 8px;
    background: linear-gradient(to bottom, #34C759, #2E865F);
    color: #fff;
}

.logo {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 16px;
}

.characters-button, .play-button {
    background-color: #fff;
    color: #333;
    font-size: 14px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin: 6px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s ease;
}

.character-selection {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 16px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: #333;
    max-width: 90%;
    max-height: 80%;
    overflow: auto;
}

.character-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 12px;
    cursor: pointer;
}

.character-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.character-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 6px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.character-card h3 {
    margin: 0;
    font-size: 14px;
}

.game-container {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    color: #333;
}

.game-board {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 1px;
}

.game-tile {
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-tile.obstacle {
    background-color: #333;
}

.player {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f4ff00;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.arrow-buttons {
    position: fixed;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.arrow-button-row {
    display: flex;
}

.arrow-button {
    width: 30px;
    height: 30px;
    background-color: rgba(204, 204, 204, 0.7);
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3px;
    border-radius: 50%;
}

.arrow-button:active {
    background-color: rgba(153, 153, 153, 0.7);
}

.arrow-button i {
    font-size: 16px;
    color: #333;
}
        .bot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
    </style>
</head>
<body>
     <div class="main-menu">
        <div class="background">
            <div class="green-gradient"></div>
        </div>
        <div class="logo">Цветовые Войны</div>
        <div class="button-container">
            <button class="characters-button" onclick="showCharacterSelection()">Персонажи</button>
            <button class="play-button" onclick="startGame()">Играть</button>
        </div>
        <div class="character-selection">
            <h2>Выберите персонажа</h2>
            <div class="character-card" onclick="selectCharacter('blue-cube')">
                <h3>Обычный жёлтый круг</h3>
                <h4>Этот жёлтый круг может показаться самым обычным существом в галактике, но не стоит его недооценивать! Обычный обладает удивительной целеустремлённостью и упорством, которые помогают ему преодолевать любые препятствия на пути к своей мечте - собрать 18 легендарных красных кружков. Хоть он и завидует невероятным способностям своего друга Круга 18, Обычный не сдаётся и использует свой ум и смекалку, чтобы одолеть коварных ботов.</h4>
            </div>
            <div class="characterNaNcard disabled" onclick="selectCharacter('gold-cube')">
                <h3>Круг 18</h3>
                <h4>Могущественный воин, чья форма напоминает совершенный круг с 18 лучами. Круг 18 обладает поистине героическими способностями - он может стрелять энергетическими лучами, создавать защитные поля и даже превращаться в устрашающего воина! Благодаря своей силе и отваге, Круг 18 является ключевым союзником Обычного в опасном путешествии за 18 красными кружками. Вместе они непобедимы!</h4>
                <p>Будет доступно для покупки в следующем релизе</p>
            </div>
        </div>
    </div>

    <div class="game-container">
        <div class="game-board">
            <!-- Игровое поле будет сгенерировано здесь -->
        </div>
    </div>
    <div class="arrow-buttons">
        <div class="arrow-button" onclick="movePlayer(0, -1)"><i class="fa fa-arrow-up"></i></div>
        <div class="arrow-button-row">
            <div class="arrow-button" onclick="movePlayer(-1, 0)"><i class="fa fa-arrow-left"></i></div>
            <div class="arrow-button" onclick="movePlayer(1, 0)"><i class="fa fa-arrow-right"></i></div>
        </div>
        <div class="arrow-button" onclick="movePlayer(0, 1)"><i class="fa fa-arrow-down"></i></div>
    </div>

    <script>
let cubes = [];
let playerCubesCollected = 0;
let cubeInterval;
let playerPosition = { x: 0, y: 0 };
let bots = [];


function showCharacterSelection() {
    document.querySelector('.character-selection').style.display = 'block';
}

function selectCharacter(character) {
    if (character === 'blue-cube') {
        selectedCharacter = 'blue-cube';
        document.querySelector('.character-selection').style.display = 'none';
        document.querySelector('.logo').textContent = 'Game Title - Синий круг';
    } else if (character === 'gold-cube') {
        alert('Круг 18 будет доступен для покупки в следующем релизе.');
    }
}

function startGame() {
    if (selectedCharacter) {
        console.log('Начало игры');
        document.querySelector('.main-menu').style.display = 'none';
        document.querySelector('.game-container').style.display = 'block';
        generateGameBoard();
        placePlayer();
        setupJoystick();
        cubeInterval = setInterval(generateCubes, 5000);
    } else {
        alert('Пожалуйста, выберите персонажа перед началом игры.');
    }
}

function generateCubes() {
    for (let i = 0; i < 3; i++) {
        const cube = document.createElement('div');
        cube.classList.add('cube');

        const x = Math.floor(Math.random() * 10);
        const y = Math.floor(Math.random() * 10);
        cube.position = { x, y };

        const cubeTile = document.querySelectorAll('.game-tile')[y * 10 + x];
        if (!cubeTile.classList.contains('obstacle')) {
            cubeTile.appendChild(cube);
            cubes.push(cube);
        }
    }
}

function generateGameBoard() {
    const gameBoard = document.querySelector('.game-board');
    gameBoard.innerHTML = '';

    for (let y = 0; y < 10; y++) {
        for (let x = 0; x < 10; x++) {
            const tile = document.createElement('div');
            tile.classList.add('game-tile');

            if (Math.random() < 0.2) {
                tile.classList.add('obstacle');
            }

            gameBoard.appendChild(tile);
        }
    }

    createBots(); // Перемещенная строка
    generateCubes(); // Перемещенная строка
    cubeInterval = setInterval(generateCubes, 5000);
    setInterval(moveBots, 500);
}

        function placePlayer() {
            const playerElement = document.createElement('div');
            playerElement.classList.add('player');

            // Помещаем игрока в случайное место на игровом поле
            playerPosition.x = Math.floor(Math.random() * 10);
            playerPosition.y = Math.floor(Math.random() * 10);

            const playerTile = document.querySelectorAll('.game-tile')[playerPosition.y * 10 + playerPosition.x];
            if (playerTile) {
                playerTile.appendChild(playerElement);
            } else {
                console.log('Player tile not found');
            }
        }

        function setupJoystick() {
            const joystick = document.querySelector('.joystick');
            const joystickStick = document.querySelector('.joystick-stick');

            joystick.addEventListener('touchstart', handleTouchStart, { passive: false });
            joystick.addEventListener('touchmove', handleTouchMove, { passive: false });
            joystick.addEventListener('touchend', handleTouchEnd);

            function handleTouchStart(event) {
                isJoystickActive = true;
                const touch = event.touches[0];
                const rect = joystick.getBoundingClientRect();
                const centerX = rect.left + rect.width / 2;
                const centerY = rect.top + rect.height / 2;
                const touchX = touch.clientX - centerX;
                const touchY = touch.clientY - centerY;
                const distance = Math.min(50, Math.sqrt(touchX ** 2 + touchY ** 2));
                const angle = Math.atan2(touchY, touchX);
                joystickX = distance * Math.cos(angle) / 50;
                joystickY = distance * Math.sin(angle) / 50;
                joystickStick.style.transform = `translate(${joystickX * 20}px, ${joystickY * 20}px)`;
                event.preventDefault();
            }

            function handleTouchMove(event) {
                if (isJoystickActive) {
                    const touch = event.touches[0];
                    const rect = joystick.getBoundingClientRect();
                    const centerX = rect.left + rect.width / 2;
                    const centerY = rect.top + rect.height / 2;
                    const touchX = touch.clientX - centerX;
                    const touchY = touch.clientY - centerY;
                    const distance = Math.min(50, Math.sqrt(touchX ** 2 + touchY ** 2));
                    const angle = Math.atan2(touchY, touchX);
                    joystickX = distance * Math.cos(angle) / 50;
                    joystickY = distance * Math.sin(angle) / 50;
                    joystickStick.style.transform = `translate(${joystickX * 20}px, ${joystickY * 20}px)`;
                    event.preventDefault();
                }
            }

            function handleTouchEnd(event) {
                isJoystickActive = false;
                joystickX = 0;
                joystickY = 0;
                joystickStick.style.transform = 'translate(0, 0)';
                event.preventDefault();
            }
        }

        function handleKeyDown(event) {
            switch (event.key) {
                case 'ArrowUp':
                    playerDirection.y = -1;
                    playerDirection.x = 0;
                    break;
                case 'ArrowDown':
                    playerDirection.y = 1;
                    playerDirection.x = 0;
                    break;
                case 'ArrowLeft':
                    playerDirection.x = -1;
                    playerDirection.y = 0;
                    break;
                case 'ArrowRight':
                    playerDirection.x = 1;
                    playerDirection.y = 0;
                    break;
            }
        }

        function handleKeyUp(event) {
            switch (event.key) {
                case 'ArrowUp':
                case 'ArrowDown':
                    playerDirection.y = 0;
                    break;
                case 'ArrowLeft':
                case 'ArrowRight':
                    playerDirection.x = 0;
                    break;
            }
        }

function movePlayer(dx, dy) {
    let newX = playerPosition.x + dx;
    let newY = playerPosition.y + dy;

            // Проверяем, что новая позиция находится в пределах игрового поля
            // и что на новом месте нет препятствия
    if (newX >= 0 && newX < 10 && newY >= 0 && newY < 10) {
        const newTile = document.querySelectorAll('.game-tile')[newY * 10 + newX];
        if (!newTile.classList.contains('obstacle')) {
            // Получаем элемент игрока
            const playerElement = document.querySelector('.player');

            // Удаляем игрока с текущей позиции
            const currentTile = document.querySelectorAll('.game-tile')[playerPosition.y * 10 + playerPosition.x];
            currentTile.removeChild(playerElement);

            // Перемещаем игрока на новую позицию
            newTile.appendChild(playerElement);
            playerPosition.x = newX;
            playerPosition.y = newY;

            // Проверяем, если игрок собрал кубик
            const cubeIndex = cubes.findIndex(cube => cube.position.x === newX && cube.position.y === newY);
            if (cubeIndex !== -1) {
                const cubeTile = document.querySelectorAll('.game-tile')[newY * 10 + newX];
                cubeTile.removeChild(cubes[cubeIndex]);
                cubes.splice(cubeIndex, 1);
                playerCubesCollected++;

                // Проверяем условие победы
                if (playerCubesCollected >= 18) {
                    alert('Вы победили!');
                    resetGame();
                }
            }
        }
    }
}

        function createBots() {
            for (let i = 0; i < 3; i++) {
                const bot = document.createElement('div');
                bot.classList.add('bot');
                bot.style.backgroundColor = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;

                const x = Math.floor(Math.random() * 10);
                const y = Math.floor(Math.random() * 10);
                bot.position = { x, y };

                const botTile = document.querySelectorAll('.game-tile')[y * 10 + x];
                botTile.appendChild(bot);

                bots.push(bot);
            }
        }

        function moveBots() {
            for (const bot of bots) {
                const botTile = document.querySelectorAll('.game-tile')[bot.position.y * 10 + bot.position.x];
                botTile.removeChild(bot);

                const closestCube = findClosestCube(bot.position, cubes);
                if (closestCube) {
                    const dx = closestCube.position.x - bot.position.x;
                    const dy = closestCube.position.y - bot.position.y;
                    bot.position.x += Math.sign(dx);
                    bot.position.y += Math.sign(dy);
                } else {
                    bot.position.x += Math.floor(Math.random() * 3) - 1;
                    bot.position.y += Math.floor(Math.random() * 3) - 1;
                }

if (botTile && botTile.contains(bot)) {
    botTile.removeChild(bot);
} else {
    console.log('Bot element not found');
}
                
                const newBotTile = document.querySelectorAll('.game-tile')[bot.position.y * 10 + bot.position.x];
                newBotTile.appendChild(bot);

                const cubeIndex = cubes.findIndex(cube => cube.position.x === bot.position.x && cube.position.y === bot.position.y);
                if (cubeIndex !== -1) {
                    const cubeTile = document.querySelectorAll('.game-tile')[bot.position.y * 10 + bot.position.x];
                    cubeTile.removeChild(cubes[cubeIndex]);
                    cubes.splice(cubeIndex, 1);
                    botCubesCollected++;
                }
            }
        }

function findClosestCube(position, cubes) {
    let closestCube = null;
    let closestDistance = Infinity;

    for (const cube of cubes) {
        const dx = cube.position.x - position.x;
        const dy = cube.position.y - position.y;
        const distance = dx * dx + dy * dy;

        if (distance < closestDistance) {
            closestCube = cube;
            closestDistance = distance;
        }
    }

    return closestCube;
}
        
function resetGame() {
    clearInterval(cubeInterval);
    cubes = [];
    playerCubesCollected = 0;
    const playerElement = document.querySelector('.player');
    const gameBoard = document.querySelector('.game-board');
    gameBoard.innerHTML = '';
    gameBoard.appendChild(playerElement);
    generateGameBoard();
    placePlayer();
    cubeInterval = setInterval(generateCubes, 5000);
}
    </script>
        <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js"></script>
</body>
</html>

